<!--
 * @Descripttion:  门店升级详情
 * @version: 
 * @Author: lehaixia
 * @Date: 2023-04-20 09:36:32
 * @LastEditors: lehaixia
 * @LastEditTime: 2023-08-10 13:57:31
-->
<template>
  <div class="detail">
    <div class="d-header" @click="toMarketDetail">
      <div class="d-header-left">
        <div class="d-header-top">
          <div class="round"><img src="@/assets/images/store.png" /></div>
          <span class="color-black"> {{ detail.marketName }}</span>
        </div>
        <div class="d-header-address">
          <img src="@/assets/images/position.png" />
          <div>
            <!-- {{ detail.provinceName }}{{ detail.cityName }}{{ detail.districtName }}{{ detail.streetName
            }} -->
            {{ detail.address }}
          </div>
        </div>
        <div class="d-header-bottom">
          <div>
            市场类型：<span class="color-black">{{ getDictName('TOBE_MARKET_TYPE', detail.marketType) }}</span>
          </div>
          <div>
            市场属性：<span class="color-black">{{ getDictName('MARKET_NATURE', detail.marketNatrue) }}</span>
          </div>
          <div>
            跟进进度：<span class="color-black">
              {{ getDictName('CTM_MARKET_BUID_PROGRESS', detail.marketFollowUpStage) }}</span
            >
          </div>
        </div>
      </div>
      <div class="d-header-right">
        <img src="@/assets/images/line-right.png" />
      </div>
    </div>

    <qmp-collapse v-model="activeNames" readonly accordion>
      <qmp-collapse-item v-for="(v, i) in list" :name="v.id" :key="i" class="item">
        <template #title>
          <div class="collapse-title">
            {{ parseTime(v.createTime, '{y}年{m}月') }}
            <img v-if="activeNames === v.id" src="@/assets/images/solid-bottom.png" />
            <img v-else src="@/assets/images/solid-right.png" />
          </div>
        </template>
        <template #right-icon></template>
        <div class="collapse-desc">
          <div>
            进展程度<span class="color-black">
              {{ getDictName('CTM_MARKET_BUID_FOLLOW_UP_PROGRESS', v.progressStage) }}</span
            >
          </div>
          <template v-if="detail.marketType !== 'B'">
            <template v-if="detail.marketNatrue !== 'L'">
              <div>
                是否有意向经销商<span class="color-black">{{ booleanMap(v.isIntendedDealer) }}</span>
              </div>

              <template v-if="[1, '1'].includes(v.isIntendedDealer)">
                <div>
                  商家名称<span class="color-black">{{ v.dealerName }}</span>
                </div>
                <div>
                  商家年龄<span class="color-black">{{ v.dealerAge }}</span>
                </div>
                <div>
                  商家意向等级<span class="color-black">{{
                    getDictName('CTM_INTENTION_LEVEL', v.intentionLevel)
                  }}</span>
                </div>
                <div>
                  是否缴纳保证金/意向金<span class="color-black">{{ booleanMap(v.isPayEarmestMoney) }}</span>
                </div>
                <div>
                  保证金缴纳时间<span class="color-black">{{
                    parseTime(v.payEarmestMoneyTime, '{y}年{m}月{d}日')
                  }}</span>
                </div>
                <div>
                  现经营品牌/行业资历<span class="color-black">{{ v.industryQualification }}</span>
                </div>
                <div>
                  是否到店/公司参观<span class="color-black">{{ booleanMap(v.isArriveShore) }}</span>
                </div>
                <div>
                  预算投入金额<span class="color-black">{{ v.budgetedAmount }} 万</span>
                </div>
                <div>
                  是否有合适场地<span class="color-black">{{ booleanMap(v.isSuitableSite) }}</span>
                </div>

                <template v-if="[1, '1'].includes(v.isSuitableSite)">
                  <div>
                    预估面积<span class="color-black">{{ v.estimatedArea }}</span>
                  </div>
                  <div>
                    场地详细地址
                    <span class="color-black">{{ v.address }}</span>
                  </div>
                </template>
              </template>
            </template>
            <template v-else>
              <div>
                是否缴纳保证金/意向金<span class="color-black">{{ booleanMap(v.isPayEarmestMoney) }}</span>
              </div>
              <div>
                保证金缴纳时间<span class="color-black">{{ parseTime(v.payEarmestMoneyTime, '{y}年{m}月{d}日') }}</span>
              </div>
              <div>
                预算投入金额<span class="color-black">{{ v.budgetedAmount }} 万</span>
              </div>
              <div>
                预估面积<span class="color-black">{{ v.estimatedArea }}</span>
              </div>
              <div>
                是否有合适场地<span class="color-black">{{ booleanMap(v.isSuitableSite) }}</span>
              </div>
              <template v-if="[1, '1'].includes(v.isSuitableSite)">
                <div>
                  场地详细地址
                  <span class="color-black">{{ v.address }}</span>
                </div>
              </template>
            </template>
          </template>
          <div>
            预计测绘时间<span class="color-black">{{ parseTime(v.estimatedSurveyTime, '{y}年{m}月{d}日') }}</span>
          </div>
          <!-- <div>
            预计报图时间<span class="color-black">{{ parseTime(v.estimatedDrawingTime, '{y}年{m}月{d}日') }}</span>
          </div> -->
          <div>
            跟进说明<span class="color-black">{{ v.remark }}</span>
          </div>
        </div>
        <div v-if="i == 0" style="border-top: 1px solid #f2f4f3; margin: 10px -10px 0; padding: 0 10px">
          <!-- 仅本周的任务可显示 -->
          <Card title="最后一次审核记录" no-mg :round="false">
            <Cell
              title="审核结果"
              :modelValue="[1, '1'].includes(v.aduitStatus) ? '通过' : '未通过'"
              default-value="--"
              readonly
            />
            <Cell title="审核意见" :modelValue="v.aduitFialRemark || ''" default-value="--" readonly />
          </Card>
          <Card v-if="[1, '1', 0, '0'].includes(v.preAduitStatus)" title="上周最后一次审批结果" no-mg :round="false">
            <Cell
              title="审核结果"
              :modelValue="[1, '1'].includes(v.preAduitStatus) ? '通过' : '未通过'"
              default-value="--"
              readonly
            />
            <Cell title="审核意见" :modelValue="v.preAduitFialRemark || ''" default-value="--" readonly />
          </Card>
        </div>
      </qmp-collapse-item>
    </qmp-collapse>

    <div class="ctm-content-foot" v-if="detail.maintenanceStage === 'A' || detail.maintenanceStage === 'D'">
      <qmp-button type="primary" round class="btn ctm-btn-main" @click.stop="onFollowUp">跟进</qmp-button>
    </div>
  </div>
</template>

<script lang="ts">
  import { useRouter, useRoute } from 'vue-router'
  import { computed, defineComponent } from 'vue'
  import { reactive, toRefs } from 'vue'
  import { marketDetail, detail } from '@/apis/storeUpgrade/index'
  import { getDictByPatchType } from '@/apis/dataDict'
  import { parseTime } from '@/utils'
  import Card from '@/components/Card/index.vue'
  import Cell from '@/components/Cell/index.vue'

  interface anyObjectModle {
    id: any
    marketId: any
    activeNames: string
    list: any[]
    detail: any
    [key: string]: any
  }
  export default defineComponent({
    name: 'StoreUpgradeTaskDetail',
    components: { Card, Cell },
    setup() {
      const $route = useRoute()
      const datas = reactive<anyObjectModle>({
        id: $route.query.id || '',
        marketId: $route.query.marketId || '',
        activeNames: '',
        list: [],
        detail: {},
        dictData: {}
      })

      const $router = useRouter()

      const toMarketDetail = () => {
        $router.push({
          path: '/storeUpgrade/detail/market',
          query: {
            id: datas.id
          }
        })
      }

      const onFollowUp = () => {
        $router.push({
          path: '/storeUpgrade/edit',
          query: {
            id: datas.id
          }
        })
      }

      const booleanMap = (val: number | string) => {
        const map: any = {
          1: '是',
          0: '否'
          // '02': '是',
          // '01': '否'
        }
        return map[val] || ''
      }
      const getDictName = (dictType: string, code: any) => {
        if (!dictType || [undefined, null, ''].includes(code)) return ''
        let name = code
        const dictList = datas.dictData[dictType] || []
        if (dictList.length > 0) {
          const obj = dictList.find((v: any) => v.dictCode === `${code}`)
          name = obj?.dictName || code
        }
        return name
      }

      const getDetail = () => {
        const id = `${datas.id}`
        // const marketId = `${datas.marketId}`

        detail(id).then((res: any) => {
          datas.detail = res.data
        })

        marketDetail(id).then((res: any) => {
          if (res.data && res.data.length) datas.activeNames = res.data[0].id
          datas.list = res.data || []
        })
      }
      getDetail()
      // 获取数据字典
      const getDictData = async () => {
        const dictTypeCodes = [
          'CTM_MARKET_BUID_FOLLOW_UP_PROGRESS',
          'TOBE_MARKET_TYPE',
          'CTM_MARKET_BUID_PROGRESS',
          'CTM_INTENTION_LEVEL',
          'MARKET_NATURE'
          // 'CTM_MARKET_DATA_FROM',
          // 'CTM_APPRAISAL_PLAN'
        ]
        datas.dictData = await getDictByPatchType({ dictTypeCodes })
      }

      getDictData()
      return {
        ...toRefs(datas),
        toMarketDetail,
        getDictName,
        booleanMap,
        onFollowUp,
        parseTime
      }
    }
  })
</script>

<style lang="less" scoped>
  .detail {
    padding: 8px 0 58px;
    .d-header {
      padding: 14px;
      background-color: var(--bg-global-weaker);
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;

      .d-header-left {
        .d-header-top {
          display: flex;
          align-items: center;
          height: 24px;
          font: var(--font-main-title-strengthen);
          .round {
            width: 24px;
            height: 24px;
            background: var(--texticon-color-warning-normal);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;

            img {
              width: 16px;
              height: 16px;
            }
          }
        }

        .d-header-address {
          display: flex;
          align-items: center;
          margin-top: 4px;
          min-height: 24px;
          font: var(--font-main-body);
          color: var(--texticon-default-stronger);

          img {
            width: 20px;
            height: 20px;
            margin-right: 8px;
            padding: 2px;
          }
        }

        .d-header-bottom {
          font: var(--font-main-body);
          color: var(--texticon-default-stronger);

          div {
            margin-top: 8px;
          }
        }
      }
      .d-header-right {
        img {
          width: 24px;
          height: 24px;
        }
      }
    }

    .collapse-title {
      display: flex;
      align-items: center;
      font: var(--font-main-body);
      color: var(--texticon-default-strong);

      img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
      }
    }
    .collapse-desc {
      div {
        display: flex;
        align-items: center;
        justify-content: space-between;

        min-height: 46px;
        background-color: var(--bg-global-weaker);
        font: var(--font-main-title-body);
        color: var(--texticon-default-stronger);
        white-space: nowrap;
      }

      span {
        margin-left: 40px;
        white-space: normal;
      }
    }
    /deep/ .group-card {
      .group-title {
        padding-left: 0;
        padding-right: 0;
      }
      .c-cell {
        padding-left: 0;
        padding-right: 0;
      }
    }
  }
  /deep/ .qmp-cell {
    background-color: #f2f4f3;
    border-bottom: 1px solid var(--divisionline-normal);

    &::after {
      display: none;
    }
  }
  /deep/.qmp-collapse-item__title--expanded::after {
    display: none;
  }

  /deep/.qmp-collapse-item__title--expanded {
    border-bottom: none;
  }
  /deep/ .qmp-collapse-item--border::after,
  /deep/ .qmp-hairline--top-bottom::after,
  /deep/ .qmp-hairline-unset--top-bottom::after {
    display: none;
  }
</style>
